<template>
	<view>
		<Topsearch  :showCate='false' :searchKeyWord="searchKeyWord" :currentCateIndex="cateIndex" @currentCateClick='changeCateIndex'
		 @searchEvent="searchDetail" />
		<view class="my-project-filter">
			<block v-for="(item,index) in provalStatus" :key="index">
				<view @click="changeFilter(index)" :class="index ==filterIndex?'my-project-filter-item-active':'my-project-filter-items'">
					{{item.name}}
				</view>
			</block>
		</view>
		<view class="my-project-contain">
			<ProjectItem :projectList="searchProjectList"></ProjectItem>
		</view>
		
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import Topsearch from '@/components/page-componnet/top-search-tab.vue'
	import ProjectItem from '@/components/page-componnet/my-project-item.vue'
	export default {
		data() {
			return {
				provalStatus:[
					{name:'全部',value:''},
					{name:'待审核',value:'0'},
					{name:'发布中',value:'1'},
					{name:'未通过',value:'2'},
					{name:'已下线',value:'4'}
				],
				filterIndex:0,
				cateIndex: 0,
				searchProjectList: [],
				pageProjectSize: 10,
				pageProjectNum: 1,
				searchKeyWord: '',
				approvalState:'',
				drawWidth: uni.upx2px(575),
				
			}
		},
		components: {
			Topsearch,
			ProjectItem,
		},
		computed: {
			...mapState('userStore', ['hasLogin', 'userInfo']),
		},
		methods: {
			...mapMutations('userStore', ['saveUserInfo']),
			searchProject(){
				uni.showNavigationBarLoading();
				let userInfo = uni.getStorageSync('userInfo');
				this.$request.post({
					url: 'projectInfo/pageQueryListForCenter.json',
					data: {
						pageSize:this.pageProjectSize,
						pageIndex:this.pageProjectNum,
						keyWord:this.searchKeyWord,
						approvalState:this.approvalState,
						createId:userInfo.userId
					},
				}).then(res => {
					uni.hideNavigationBarLoading();
					let array = res.data;
					if (this.pageProjectNum === 1) {
						this.searchProjectList = [];
					}
					for (let i = 0; i < array.length; i++) {
						this.searchProjectList.push(array[i])
					}
					if (this.pageProjectSize * this.pageProjectNum >= res.count) {
						this.isShowBottom = true;
					}
				});
			},
			changeFilter(index){
				if(this.filterIndex!=index){
					this.filterIndex = index;
					this.approvalState = this.provalStatus[index].value;
					this.searchProject()
				}
			},
			//查询推荐
			//获取优选推荐的数据
			getRecommendList(){
				this.$request.post({
					url: 'projectInfo/pageQueryList.json',
					data: {
						pageSize:5,
						pageIndex:1,
					},
				}).then(res => {
					let array = res.data;
					this.searchRecommendProjectList = array.length>5?array.slice(0,5):array;
				});
			},
			searchDetail(data) {
				this.searchKeyWord=data.keyWord;
				this.pageProjectNum = 1;
				this.isShowBottom = false;
				this.searchProject();
				
			},
			changeCateIndex(data) {
				this.cateIndex = data
			},
		},
		onNavigationBarButtonTap(e) {
			this.showRight = !this.showRight
		},
		onBackPress() {
			if (this.showRight || this.showLeft) {
				this.hide()
				return true
			}
		},
		onPullDownRefresh: function() {
			this.pageProjectNum = 1;
			this.isShowBottom = false;
			this.searchProject();
		},
		onReachBottom() {
			
			if(this.isShowBottom){
			}else{
				this.pageProjectNum++;
				this.searchProject();
			}
		},
		onLoad(option) {
			this.searchProject();
			// this.getRecommendList()
		}
	}
</script>
<style>
	page{
		background-color:#F4F4F4;
	}
</style>
<style scoped>
	
	.my-project-contain{
		/* padding: 0 30upx; */
	}
	.my-project-filter{
		display: flex;
		justify-content: space-between;
		background-color: #FFFFFF;
		padding: 0upx 30upx;
		
		padding-top: 18upx;
		margin-bottom: 20upx;
	}
	.my-project-filter-item{
		padding-bottom: 20upx;
		font-size:28upx;
		font-family:PingFangSC-Regular,PingFang SC;
		font-weight:400;
		color:rgba(74,74,74,1);
		/* color:rgba(104,104,104,1); */
	}
	.my-project-filter-item-active{
		padding-bottom: 20upx;
		font-size:28upx;
		font-family:PingFangSC-Medium,PingFang SC;
		font-weight:500;
		color:rgba(42,125,250,1);
		border-bottom: 6upx solid #2A7DFA;
	}
</style>
